<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">segmented-control</view>
			<view class="tui-page__desc">分段器</view>
		</view>
		<view class="tui-page__bd thorui-padding">
			<view class="tui-title tui-padding__first">默认使用</view>
			<tui-segmented-control :values="values" @click="change"></tui-segmented-control>
			<view class="tui-title">自定义颜色</view>
			<tui-segmented-control :values="values" activeColor="#07c160" @click="change"></tui-segmented-control>
			<view class="tui-ptop">
				<tui-segmented-control :values="values" activeColor="#ff7900"></tui-segmented-control>
			</view>
			<view class="tui-ptop">
				<tui-segmented-control :values="values" activeColor="#EB0909"></tui-segmented-control>
			</view>
			<view class="tui-ptop">
				<tui-segmented-control :values="values" activeColor="#007AFF"></tui-segmented-control>
			</view>
			<view class="tui-ptop">
				<tui-segmented-control :values="values" activeColor="#000000"></tui-segmented-control>
			</view>
			<view class="tui-ptop">
				<tui-segmented-control :values="values" activeColor="#c0c0c0"></tui-segmented-control>
			</view>
			<view class="tui-title">禁用状态</view>
			<tui-segmented-control :values="vals" disabled @click="change"></tui-segmented-control>
			<view class="tui-title">默认选中</view>
			<tui-segmented-control :values="vals" :current="2" @click="change"></tui-segmented-control>
			<view class="tui-title">调整高度</view>
			<tui-segmented-control :values="vals" height="68rpx" @click="change"></tui-segmented-control>
			<view class="tui-title">圆角</view>
			<view style="padding: 0 50rpx;">
				<tui-segmented-control :values="vals" radius="30px" @click="change"></tui-segmented-control>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				values: ['Segment1', 'Segment2'],
				vals: ['Segment1', 'Segment2', 'Segment3']
			}
		},
		methods: {
			change(e) {
				console.log(e)
			}
		}
	}
</script>

<style>
	.container{
		padding-bottom: 150rpx;
	}
	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 50rpx 0 30rpx;
		box-sizing: border-box;
	}

	.tui-padding__first {
		padding-top: 0;
	}

	.tui-ptop {
		padding-top: 30rpx;
	}
</style>
